<template>
	<view class="search-box flex_cc">
		<view class="input-box flex_fsc">
			<uni-icons type="search" color="#585C66" size="20"></uni-icons>
			<input
				v-model="inputData"
				type="text"
				:placeholder="prop.placeholder"
				placeholder-class="uni-placeholder"
				confirm-type="search"
				@confirm="scarch"
			/>
			<view v-if="prop.reset" class="uni-color-main flex_sh" @click="reset">重置</view>
		</view>
	</view>
</template>
<script setup>
import { ref } from 'vue';

const prop = defineProps({
	placeholder: {
		type: String,
		default: '输入搜索关键字'
	},
	reset: {
		type: Boolean,
		default: false
	}
});
const emit = defineEmits(['search', 'reset']);
const inputData = ref('');
function scarch() {
	emit('search', inputData.value);
}

function reset() {
	inputData.value = ''
	emit('reset')
}
</script>
<style lang="scss">
.search-box {
	width: 100%;
	height: 88rpx;
}
.input-box {
	width: 702rpx;
	height: 64rpx;
	background: $uni-F5F5F5;
	border-radius: 16rpx;
	box-sizing: border-box;
	padding: 0 24rpx;
}
input {
	width: 100%;
	margin-left: 16rpx;
}
</style>
